<template>
  <div
    class="search-list"
    v-if="isShowDetailList"
    ref="detailList"
    :style="{ 'max-height': tableHeight + 60 + 'px' }"
  >
    <div class="close">
      <el-button
        circle
        type="plain"
        size="small"
        :icon="Close"
        class="close-btn"
        @click="handleCloseTabs"
      />
    </div>
    <el-tabs
      v-model="activeName"
      type="card"
      class="demo-tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane label="自查列表" name="自查列表">
        <div
          class="tab-content"
          :style="{
            'max-height': tableHeight + 'px',
            'max-width': tableWeight + 'px',
            'min-height': tableHeight + 'px',
            'min-width': tableWeight + 'px',
          }"
        >
          <div
            class="yh-list"
            :style="{ 'max-height': tableHeight + 40 + 'px' }"
          >
            <el-table
              :data="zcTableData"
              :height="tableCheight"
              border
              style="width: 100%"
            >
              <!-- 动态列（中间内容列）-->
              <el-table-column
                v-for="column in zcColumns"
                :key="column.prop"
                :fixed="column.fixed"
                :prop="column.prop"
                :label="column.label"
                :align="column.align"
                :width="column.width"
              >
                <!-- 插槽处理 户主姓名 -->
                <template v-if="column.prop === 'hzxm'" #default="{ row }">
                  {{ getHzxm(row.hzxm) }}
                </template>
                <!-- 插槽处理 详细地址 -->
                <template v-if="column.prop === 'address'" #default="{ row }">
                  {{ getAddress(row.address) }}
                </template>
              </el-table-column>

              <!-- 固定操作列 -->
              <el-table-column
                fixed="right"
                label="操作"
                width="80"
                align="center"
              >
                <template #default="scope">
                  <el-button
                    type="primary"
                    size="small"
                    @click.prevent="zcDetailInfoFn(scope)"
                    >详情</el-button
                  >
                </template>
              </el-table-column>
              <!-- 自定义 "暂无数据" 样式 -->
              <template #empty>
                <div class="custom-empty">
                  <p class="empty-text">暂无数据</p>
                </div>
              </template>
            </el-table>
            <div class="pagination" v-show="zcTotal > 0">
              <el-pagination
                @size-change="zcHandleSizeChange"
                @current-change="zcHandleCurrentChange"
                :current-page="zcCurrentPage"
                :page-size="zcCurrentSize"
                :pager-count="5"
                :page-sizes="[10, 20, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="zcTotal"
                popper-class="select_bottom"
              />
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="检查列表" name="检查列表">
        <div
          class="tab-content"
          :style="{
            'max-height': tableHeight + 'px',
            'max-width': tableWeight + 'px',
            'min-height': tableHeight + 'px',
            'min-width': tableWeight + 'px',
          }"
        >
          <div
            class="yh-list"
            :style="{ 'max-height': tableHeight + 40 + 'px' }"
          >
            <el-table
              :data="jcTableData"
              :height="tableCheight"
              border
              style="width: 100%"
            >
              <!-- 动态列（中间内容列）-->
              <el-table-column
                v-for="column in jcColumns"
                :key="column.prop"
                :fixed="column.fixed"
                :prop="column.prop"
                :label="column.label"
                :align="column.align"
                :width="column.width"
              >
                <!-- 插槽处理 户主姓名 -->
                <template v-if="column.prop === 'hzxm'" #default="{ row }">
                  {{ getHzxm(row.hzxm) }}
                </template>
                <!-- 插槽处理 详细地址 -->
                <template v-if="column.prop === 'address'" #default="{ row }">
                  {{ getAddress(row.address) }}
                </template>
                <!-- 房屋状态列 (添加 el-tag) -->
                <template v-if="column.prop === 'fwztname'" #default="{ row }">
                  <el-tag :type="getTagType(row.fwztname)" disable-transitions>
                    {{ row.fwztname }}
                  </el-tag>
                </template>
              </el-table-column>
              <!-- 固定操作列 -->
              <el-table-column
                fixed="right"
                label="操作"
                width="80"
                align="center"
              >
                <template #default="scope">
                  <el-button
                    type="primary"
                    size="small"
                    @click.prevent="jcDetailInfoFn(scope)"
                    >详情</el-button
                  >
                </template>
              </el-table-column>
              <!-- 自定义 "暂无数据" 样式 -->
              <template #empty>
                <div class="custom-empty">
                  <p class="empty-text">暂无数据</p>
                </div>
              </template>
            </el-table>
            <div class="pagination" v-show="jcTotal > 0">
              <el-pagination
                @size-change="jcHandleSizeChange"
                @current-change="jcHandleCurrentChange"
                :current-page="jcCurrentPage"
                :page-size="jcCurrentSize"
                :pager-count="5"
                :page-sizes="[10, 20, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="jcTotal"
                popper-class="select_bottom"
              />
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="乡镇核验列表" name="乡镇核验列表">
        <div
          class="tab-content"
          :style="{
            'max-height': tableHeight + 'px',
            'max-width': tableWeight + 'px',
            'min-height': tableHeight + 'px',
            'min-width': tableWeight + 'px',
          }"
        >
          <div
            class="yh-list"
            :style="{ 'max-height': tableHeight + 40 + 'px' }"
          >
            <el-table
              :data="xzTableData"
              :height="tableCheight"
              border
              style="width: 100%"
            >
              <!-- 动态列（中间内容列）-->
              <el-table-column
                v-for="column in xzColumns"
                :key="column.prop"
                :fixed="column.fixed"
                :prop="column.prop"
                :label="column.label"
                :align="column.align"
                :width="column.width"
              >
                <!-- 插槽处理 户主姓名 -->
                <template v-if="column.prop === 'hzxm'" #default="{ row }">
                  {{ getHzxm(row.hzxm) }}
                </template>
                <!-- 插槽处理 详细地址 -->
                <template v-if="column.prop === 'address'" #default="{ row }">
                  {{ getAddress(row.address) }}
                </template>
                <!-- 插槽处理 核验房屋状态 -->
                <template v-if="column.prop === 'yhzt'" #default="{ row }">
                  <el-tag :type="getTagYhzt(row.yhzt)" disable-transitions>
                    {{ row.yhzt }}
                  </el-tag>
                </template>
              </el-table-column>

              <!-- 固定操作列 -->
              <el-table-column
                fixed="right"
                label="操作"
                width="80"
                align="center"
              >
                <template #default="scope">
                  <el-button
                    type="primary"
                    size="small"
                    @click.prevent="xzDetailInfoFn(scope)"
                    >详情</el-button
                  >
                </template>
              </el-table-column>
              <!-- 自定义 "暂无数据" 样式 -->
              <template #empty>
                <div class="custom-empty">
                  <p class="empty-text">暂无数据</p>
                </div>
              </template>
            </el-table>
            <div class="pagination" v-show="xzTotal > 0">
              <el-pagination
                @size-change="xzHandleSizeChange"
                @current-change="xzHandleCurrentChange"
                :current-page="xzCurrentPage"
                :page-size="xzCurrentSize"
                :pager-count="5"
                :page-sizes="[10, 20, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="xzTotal"
                popper-class="select_bottom"
              />
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="区级核验列表" name="区级核验列表">
        <div
          class="tab-content"
          :style="{
            'max-height': tableHeight + 'px',
            'max-width': tableWeight + 'px',
            'min-height': tableHeight + 'px',
            'min-width': tableWeight + 'px',
          }"
        >
          <div
            class="yh-list"
            :style="{ 'max-height': tableHeight + 40 + 'px' }"
          >
            <el-table
              :data="qjTableData"
              :height="tableCheight"
              border
              style="width: 100%"
            >
              <!-- 动态列（中间内容列）-->
              <el-table-column
                v-for="column in qjColumns"
                :key="column.prop"
                :fixed="column.fixed"
                :prop="column.prop"
                :label="column.label"
                :align="column.align"
                :width="column.width"
              >
                <!-- 插槽处理 户主姓名 -->
                <template v-if="column.prop === 'hzxm'" #default="{ row }">
                  {{ getHzxm(row.hzxm) }}
                </template>
                <!-- 插槽处理 详细地址 -->
                <template v-if="column.prop === 'address'" #default="{ row }">
                  {{ getAddress(row.address) }}
                </template>
                <!-- 插槽处理 核验房屋状态 -->
                <template v-if="column.prop === 'yhzt'" #default="{ row }">
                  <el-tag :type="getTagYhzt(row.yhzt)" disable-transitions>
                    {{ row.yhzt }}
                  </el-tag>
                </template>
              </el-table-column>

              <!-- 固定操作列 -->
              <el-table-column
                fixed="right"
                label="操作"
                width="80"
                align="center"
              >
                <template #default="scope">
                  <el-button
                    type="primary"
                    size="small"
                    @click.prevent="qjDetailInfoFn(scope)"
                    >详情</el-button
                  >
                </template>
              </el-table-column>
              <!-- 自定义 "暂无数据" 样式 -->
              <template #empty>
                <div class="custom-empty">
                  <p class="empty-text">暂无数据</p>
                </div>
              </template>
            </el-table>
            <div class="pagination" v-show="qjTotal > 0">
              <el-pagination
                @size-change="qjHandleSizeChange"
                @current-change="qjHandleCurrentChange"
                :current-page="qjCurrentPage"
                :page-size="qjCurrentSize"
                :pager-count="5"
                :page-sizes="[10, 20, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="qjTotal"
                popper-class="select_bottom"
              />
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="市级核验" name="市级核验列表">
        <div
          class="tab-content"
          :style="{
            'max-height': tableHeight + 'px',
            'max-width': tableWeight + 'px',
            'min-height': tableHeight + 'px',
            'min-width': tableWeight + 'px',
          }"
        >
          <div
            class="yh-list"
            :style="{ 'max-height': tableHeight + 40 + 'px' }"
          >
            <el-table
              :data="sjTableData"
              :height="tableCheight"
              border
              style="width: 100%"
            >
              <!-- 动态列（中间内容列）-->
              <el-table-column
                v-for="column in sjColumns"
                :key="column.prop"
                :fixed="column.fixed"
                :prop="column.prop"
                :label="column.label"
                :align="column.align"
                :width="column.width"
              >
                <!-- 插槽处理 户主姓名 -->
                <template v-if="column.prop === 'hzxm'" #default="{ row }">
                  {{ getHzxm(row.hzxm) }}
                </template>
                <!-- 插槽处理 详细地址 -->
                <template v-if="column.prop === 'address'" #default="{ row }">
                  {{ getAddress(row.address) }}
                </template>
                <!-- 插槽处理 核验房屋状态 -->
                <template v-if="column.prop === 'yhzt'" #default="{ row }">
                  <el-tag :type="getTagYhzt(row.yhzt)" disable-transitions>
                    {{ row.yhzt }}
                  </el-tag>
                </template>
              </el-table-column>

              <!-- 固定操作列 -->
              <el-table-column
                fixed="right"
                label="操作"
                width="80"
                align="center"
              >
                <template #default="scope">
                  <el-button
                    type="primary"
                    size="small"
                    @click.prevent="sjDetailInfoFn(scope)"
                    >详情</el-button
                  >
                </template>
              </el-table-column>
              <!-- 自定义 "暂无数据" 样式 -->
              <template #empty>
                <div class="custom-empty">
                  <p class="empty-text">暂无数据</p>
                </div>
              </template>
            </el-table>
            <div class="pagination" v-show="sjTotal > 0">
              <el-pagination
                @size-change="sjHandleSizeChange"
                @current-change="sjHandleCurrentChange"
                :current-page="sjCurrentPage"
                :page-size="sjCurrentSize"
                :pager-count="5"
                :page-sizes="[10, 20, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="sjTotal"
                popper-class="select_bottom"
              />
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted, nextTick } from 'vue'
import { Close } from '@element-plus/icons-vue'
const emit = defineEmits()
// Props
const props = defineProps({
  isShowDetailList: {
    type: Boolean,
    default: false,
  },
  detailLists: {
    type: Object,
    default: () => {},
  },
  total: {
    type: Object,
    default: () => {},
  },
  // 自查
  zcList: {
    type: Array,
    default: [],
  },
  zcTotal: {
    type: Number,
    default: 0,
  },
  // 检查
  jcList: {
    type: Array,
    default: [],
  },
  jcTotal: {
    type: Number,
    default: 0,
  },
  // 乡镇
  xzList: {
    type: Array,
    default: [],
  },
  xzTotal: {
    type: Number,
    default: 0,
  },
  // 区级
  qjList: {
    type: Array,
    default: [],
  },
  qjTotal: {
    type: Number,
    default: 0,
  },
  // 市级
  sjList: {
    type: Array,
    default: [],
  },
  sjTotal: {
    type: Number,
    default: 0,
  },
})
// Reactive state
const tableHeight = ref(360) // 表格高度
const tableWeight = ref(290) // 表格宽度
const tableCheight = ref(320) // 表格内容高度
const detailList = ref(null)

const activeName = ref('自查列表')

const handleCloseTabs = () => {
  emit('openDetailList')
  activeName.value = '自查列表'
}
/**************** 自查信息 -- start*****************/
// 自查列表数据
const zcTableData = ref([])
// 自查列表总数
const zcTotal = ref(0)
// 自查列
const zcColumns = ref([
  { prop: 'index', label: '序号', align: 'center', width: '50', fixed: 'left' },
  { prop: 'hzxm', label: '户主姓名', align: 'left', width: '80' },
  { prop: 'address', label: '详细地址', align: 'left' },
  { prop: 'fwbh', label: '房屋编号', align: 'left' },
  { prop: 'pcsj', label: '自查时间', align: 'left' },
])
// 自查 当前页
const zcCurrentPage = ref(1)
// 自查 每页条数
const zcCurrentSize = ref(20)
// 自查每页多少条
const zcHandleSizeChange = (val) => {
  zcCurrentSize.value = val
  emit('_getZcList')
}
// 自查第几页
const zcHandleCurrentChange = (val) => {
  zcCurrentPage.value = val
  emit('_getZcList')
}
// 详情方法
const zcDetailInfoFn = (val) => {
  emit('_getZcInfo', val)
}

// 自查监听
watch(
  () => props.zcList,
  (newData) => {
    if (newData) {
      zcTableData.value = newData
      nextTick(() => {
        resetTableCHeight(); // 确保高度计算在数据更新后执行
      });
    }
  },
  { immediate: true } // 在组件初始化时就进行一次赋值
)
watch(
  () => props.zcTotal,
  (newData) => {
    if (newData) {
      zcTotal.value = newData
    }
  },
  { immediate: true } // 在组件初始化时就进行一次赋值
)
/**************** 自查信息 -- start*****************/

/**************** 检查信息 -- start*****************/
// 检查列表数据
const jcTableData = ref([])
// 检查列表总数
const jcTotal = ref(0)
// 检查列
const jcColumns = ref([
  { prop: 'index', label: '序号', align: 'center', width: '50', fixed: 'left' },
  { prop: 'hzxm', label: '户主姓名', align: 'left', width: '80' },
  { prop: 'address', label: '详细地址', align: 'left', width: '140' },
  { prop: 'fwbh', label: '房屋编号', align: 'left', width: '140' },
  { prop: 'pcsj', label: '检查时间', align: 'left', width: '140' },
  { prop: 'create_name', label: '检查人', align: 'left', width: '80' },
  { prop: 'fwztname', label: '房屋状态', align: 'left', width: '100' },
])
// 检查 当前页
const jcCurrentPage = ref(1)
// 检查 每页条数
const jcCurrentSize = ref(20)
// 检查每页多少条
const jcHandleSizeChange = (val) => {
  jcCurrentSize.value = val
  emit('_getJcList')
}
// 检查第几页
const jcHandleCurrentChange = (val) => {
  jcCurrentPage.value = val
  emit('_getJcList')
}
// 详情方法
const jcDetailInfoFn = (val) => {
  emit('_getJcInfo', val)
}

// 检查监听
watch(
  () => props.jcList,
  (newData) => {
    if (newData) {
      jcTableData.value = newData
      nextTick(() => {
        resetTableCHeight(); // 确保高度计算在数据更新后执行
      });
    }
  },
  { immediate: true } // 在组件初始化时就进行一次赋值
)
watch(
  () => props.jcTotal,
  (newData) => {
    if (newData) {
      jcTotal.value = newData
    }
  },
  { immediate: true } // 在组件初始化时就进行一次赋值
)
const getTagType = (status) => {
  switch (status) {
    case '不出租':
      return 'info' // 蓝色
    case '正常出租':
      return 'success' // 绿色
    case '已拆除':
      return 'danger' // 红色
    default:
      return 'default' // 默认灰色
  }
}
const getTagYhzt = (status) => {
  switch (status) {
    case '已核查无隐患':
      return 'success' // 绿色
    case '已核查有隐患':
      return 'danger' // 红色
    default:
      return 'default' // 默认灰色
  }
}
const getAddress = (address) => {
  if (!address) return '' // 先判断是否为空
  return address.length > 10 ? address.slice(0, 10) + '...' : address
}
const getHzxm = (hzxm) => {
  if (!hzxm) return '' // 先判断是否为空
  return hzxm.length > 3 ? hzxm.slice(0, 3) + '...' : hzxm
}
/**************** 检查信息 -- end*****************/

/**************** 乡镇核验信息 -- start*****************/
// 乡镇核验列表数据
const xzTableData = ref([])
// 乡镇核验列表总数
const xzTotal = ref(0)
// 乡镇核验列
const xzColumns = ref([
  { prop: 'index', label: '序号', align: 'center', width: '50', fixed: 'left' },
  { prop: 'hzxm', label: '姓名', align: 'left', width: '80' },
  { prop: 'address', label: '详细地址', align: 'left', width: '140' },
  { prop: 'fwbh', label: '房屋编号', align: 'left', width: '140' },
  { prop: 'pcsj', label: '核验时间', align: 'left', width: '140' },
  { prop: 'create_name', label: '核验人', align: 'left', width: '80' },
  { prop: 'yhzt', label: '核验房屋状态', align: 'left', width: '140' },
])
// 乡镇核验 当前页
const xzCurrentPage = ref(1)
// 乡镇核验 每页条数
const xzCurrentSize = ref(20)
// 乡镇核验每页多少条
const xzHandleSizeChange = (val) => {
  xzCurrentSize.value = val
  emit('_getXzList')
}
// 乡镇核验第几页
const xzHandleCurrentChange = (val) => {
  xzCurrentPage.value = val
  emit('_getXzList')
}
// 乡镇核验方法
const xzDetailInfoFn = (val) => {
  emit('_getXzInfo', val)
}

// 乡镇核验监听
watch(
  () => props.xzList,
  (newData) => {
    if (newData) {
      xzTableData.value = newData
      nextTick(() => {
        resetTableCHeight(); // 确保高度计算在数据更新后执行
      });
    }
  },
  { immediate: true } // 在组件初始化时就进行一次赋值
)
watch(
  () => props.xzTotal,
  (newData) => {
    if (newData) {
      xzTotal.value = newData
    }
  },
  { immediate: true } // 在组件初始化时就进行一次赋值
)
/**************** 乡镇核验信息 -- end*****************/

/**************** 区级核验信息 -- start*****************/
// 区级核验列表数据
const qjTableData = ref([])
// 区级核验列表总数
const qjTotal = ref(0)
// 区级核验列
const qjColumns = ref([
  { prop: 'index', label: '序号', align: 'center', width: '50', fixed: 'left' },
  { prop: 'hzxm', label: '姓名', align: 'left', width: '80' },
  { prop: 'address', label: '详细地址', align: 'left', width: '140' },
  { prop: 'fwbh', label: '房屋编号', align: 'left', width: '140' },
  { prop: 'pcsj', label: '核验时间', align: 'left', width: '140' },
  { prop: 'create_name', label: '核验人', align: 'left', width: '80' },
  { prop: 'yhzt', label: '核验房屋状态', align: 'left', width: '140' },
])
// 区级核验 当前页
const qjCurrentPage = ref(1)
// 区级核验 每页条数
const qjCurrentSize = ref(20)
// 区级核验每页多少条
const qjHandleSizeChange = (val) => {
  qjCurrentSize.value = val
  emit('_getQjList')
}
// 区级核验第几页
const qjHandleCurrentChange = (val) => {
  qjCurrentPage.value = val
  emit('_getQjList')
}
// 区级核验方法
const qjDetailInfoFn = (val) => {
  emit('_getQjInfo', val)
}

// 区级核验监听
watch(
  () => props.qjList,
  (newData) => {
    if (newData) {
      qjTableData.value = newData
      nextTick(() => {
        resetTableCHeight(); // 确保高度计算在数据更新后执行
      });
    }
  },
  { immediate: true } // 在组件初始化时就进行一次赋值
)
watch(
  () => props.qjTotal,
  (newData) => {
    if (newData) {
      qjTotal.value = newData
    }
  },
  { immediate: true } // 在组件初始化时就进行一次赋值
)
/**************** 区级核验信息 -- end*****************/

/**************** 市级核验信息 -- start*****************/
// 市级核验列表数据
const sjTableData = ref([])
// 市级核验列表总数
const sjTotal = ref(0)
// 市级核验列
const sjColumns = ref([
  { prop: 'index', label: '序号', align: 'center', width: '50', fixed: 'left' },
  { prop: 'hzxm', label: '姓名', align: 'left', width: '80' },
  { prop: 'address', label: '详细地址', align: 'left', width: '140' },
  { prop: 'fwbh', label: '房屋编号', align: 'left', width: '140' },
  { prop: 'pcsj', label: '核验时间', align: 'left', width: '140' },
  { prop: 'create_name', label: '核验人', align: 'left', width: '80' },
  { prop: 'yhzt', label: '核验房屋状态', align: 'left', width: '140' },
])
// 市级核验 当前页
const sjCurrentPage = ref(1)
// 市级核验 每页条数
const sjCurrentSize = ref(20)
// 市级核验每页多少条
const sjHandleSizeChange = (val) => {
  sjCurrentSize.value = val
  emit('_getSjList')
}
// 市级核验第几页
const sjHandleCurrentChange = (val) => {
  sjCurrentPage.value = val
  emit('_getSjList')
}
// 市级核验方法
const sjDetailInfoFn = (val) => {
  emit('_getSjInfo', val)
}

// 市级核验监听
watch(
  () => props.sjList,
  (newData) => {
    if (newData) {
      sjTableData.value = newData
      nextTick(() => {
        resetTableCHeight(); // 确保高度计算在数据更新后执行
      });
    }
  },
  { immediate: true } // 在组件初始化时就进行一次赋值
)
watch(
  () => props.sjTotal,
  (newData) => {
    if (newData) {
      sjTotal.value = newData
    }
  },
  { immediate: true } // 在组件初始化时就进行一次赋值
)
/**************** 市级核验信息 -- end*****************/

// 动态获取 列表高度
watch(
  () => props.isShowDetailList,
  (newVal) => {
    if (newVal) {
      nextTick(() => {
        let allHeight = document.querySelector('.map-container').clientHeight
        let allWidth = document.querySelector('.map-container').clientWidth
        tableHeight.value = allHeight * 0.7
        tableWeight.value = allWidth * 0.4
        resetTableCHeight()
      })
    }
  }
)
const resetTableCHeight = () => {
  // 默认表格内容最大高度  =  tab-content的高度 - 分页的高度
  let tableCenterH = tableHeight.value - 40
  if (activeName.value === '自查列表') {
    let zcH = zcTableData.value.length
    if (zcH * 40 < tableCenterH && zcH !== 0) {
      tableCheight.value = zcH * 40 + 50 // 加50 未了解决滚动条
    } else {
      tableCheight.value = tableHeight.value - 60
    }
  }
  if (activeName.value === '检查列表') {
    let jcH = jcTableData.value.length
    if (jcH * 40 < tableCenterH && jcH !== 0) {
      tableCheight.value = jcH * 40 + 50
    } else {
      tableCheight.value = tableHeight.value - 60
    }
  }
  if (activeName.value === '乡镇核验列表') {
    let xzH = xzTableData.value.length
    if (xzH * 40 < tableCenterH && xzH !== 0) {
      tableCheight.value = xzH * 40 + 50
    } else {
      tableCheight.value = tableHeight.value - 60
    }
  }
  if (activeName.value === '区级核验列表') {
    let qjH = qjTableData.value.length
    if (qjH * 40 < tableCenterH && qjH !== 0) {
      tableCheight.value = qjH * 40 + 50
    } else {
      tableCheight.value = tableHeight.value - 60
    }
  }
  if (activeName.value === '市级核验列表') {
    let sjH = sjTableData.value.length
    if (sjH * 40 < tableCenterH && sjH !== 0) {
      tableCheight.value = sjH * 40 + 50
    } else {
      tableCheight.value = tableHeight.value - 60
    }
  }
}
onMounted(() => {
  if (props.isShowSearchList) {
    // DOM 渲染完成后获取高度
    nextTick(() => {
      if (searchList.value) {
        let allHeight = document.querySelector('.map-container').clientHeight
        let allWidth = document.querySelector('.map-container').clientWidth
        tableHeight.value = allHeight * 0.7
        tableWeight.value = allWidth * 0.4
        resetTableCHeight()
      }
    })
  }
})

const handleClick = (tab, event) => {
  activeName.value = tab.paneName // 手动同步 activeName
  resetTableCHeight()
}

defineExpose({
  // 自查
  zcCurrentPage,
  zcCurrentSize,
  zcTotal,
  // 检查
  jcCurrentPage,
  jcCurrentSize,
  jcTotal,
  // 乡镇
  xzCurrentPage,
  xzCurrentSize,
  xzTotal,
  // 区级
  qjCurrentPage,
  qjCurrentSize,
  qjTotal,
  // 市级
  sjCurrentPage,
  sjCurrentSize,
  sjTotal,
})
</script>

<style lang="scss" scoped>
.search-list {
  position: absolute;
  top: 5rem;
  right: 1rem;
  z-index: 999;
  width: auto;
  // height: 400px;
  // border: 1px solid red;
  padding: 1rem 1rem 0 1rem;
  background-color: rgba(91, 93, 179, 0.8); /* 保留父容器背景，但不影响子元素 */
  // 关闭按钮
  .close {
    width: 100%;
    height: 22px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  // 表格样式
  /* 设置表格样式 */
  ::v-deep .el-table {
    width: 100%;
    overflow-x: auto; /* 启用水平滚动条 */
    background-color: transparent; /* 保证表格背景透明 */
    // color: #93dcfe;
    color: #fff;
    font-size: 2.2rem;
    font-family: 'Source Han Sans CN Normal', 'Source Han Sans CN Normal-Normal';
    font-weight: normal;
    --el-table-border-color: none;
    --el-table-border: none;
    .el-table-fixed-column--left {
      background-color: rgba(91, 93, 179, 1);
    }
    .el-table-fixed-column--right {
      background-color: rgba(91, 93, 179, 1);
    }
    .el-scrollbar__bar.is-horizontal {
      display: block;
      height: 10px;
      left: 2px;
    }
    .el-scrollbar__bar.is-vertical {
      display: block;
      width: 10px;
      top: 2px;
    }
    .el-scrollbar__thumb {
      background-color: #15f3e8;
    }
    .el-table__header-wrapper {
      // background-color:  rgba(91, 93, 179, 1);
      border-bottom: 1px solid #fff;
    }
    .el-table__cell {
      // border: 1px solid red;
      // padding: 0;
    }
  }
  /* 表格头、行和单元格样式 */
  ::v-deep .el-table th,
  ::v-deep .el-table tr,
  ::v-deep .el-table td {
    background-color: transparent; /* 保证表格头、行、单元格背景透明 */
    border: none;
    // color: #93dcfe;
    color: #fff;
    font-size: 2.2rem;
  }

  /* 设置表格行高度 */
  ::v-deep .el-table__body tr {
    padding: 0; /* 去除默认内边距 */
    height: 40px; /* 行高 */
    line-height: 40px; /* 行高通过 line-height 保证文本垂直居中 */
  }

  /* 设置单元格样式 */
  ::v-deep .el-table__body td {
    padding: 0; /* 去除单元格内边距 */
    line-height: 40px; /* 确保内容垂直居中 */
  }
  /* 高亮当前行颜色 */
  ::v-deep .el-table tbody tr:hover > td {
    background: #063570 !important;
  }

  /* 去掉表格中的内边距 */
  ::v-deep .el-table .cell,
  .el-table th div {
    padding: 0;
    font-size: 1.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 表格的斑马条纹 */
  ::v-deep .el-table__row.warning-row {
    background: #01205a;
  }

  /* 分页器样式 */
  .pagination {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    // 共几页
    ::v-deep .el-pagination__total {
      color: #fff;
    }
    // 上一页、下一页
    ::v-deep .btn-prev,
    ::v-deep .btn-next {
      color: #fff;
      background-color: rgba(91, 93, 179, 1);
    }
    // 所有页的列表
    ::v-deep .el-pager li {
      background-color: rgba(91, 93, 179, 1);
      color: #fff;
    }

    // **鼠标悬浮时的效果**
    ::v-deep .el-pager li:hover {
      // background-color: #5b5db3; /* 悬浮颜色 */
      color: #409eff;
    }

    // **选中当前页的效果**
    ::v-deep .el-pager li.is-active {
      // background-color: #ff9800; /* 选中页高亮 */
      color: #409eff;
      font-weight: bold;
    }
    // 选择每页多少条的下拉框
    ::v-deep .el-pagination__sizes {
      .el-input__wrapper {
        background-color: rgba(91, 93, 179, 1); /* 设置背景颜色 */

        .el-input__inner {
          color: #fff; /* 设置字体颜色 */
        }
      }
    }
    // 前往哪一页
    ::v-deep .el-pagination__jump {
      color: #fff;
      .el-input__wrapper {
        background-color: rgba(91, 93, 179, 1);
        .el-select .el-input__inner {
          color: #fff;
        }
        .el-input__inner {
          color: #fff;
        }
      }
    }
  }
}
.demo-tabs {
  ::v-deep .el-tabs__header {
    margin: 0;
    color: #fff; /* 设置标题字体颜色为白色 */
  }

  ::v-deep .el-tabs__nav-wrap {
    .el-tabs__nav-scroll {
      .el-tabs__nav {
        .el-tabs__item {
          color: #fff; /* 设置所有 tab 字体为白色 */
        }
        /* 保持选中项的高亮 */
        .el-tabs__item.is-active {
          color: #409eff; /* 设置选中项的颜色，通常是蓝色 */
        }
      }
    }
  }
  ::v-deep .el-tabs__content {
    .tab-content {
      // height: 300px;
      overflow: auto;
      /********* 按钮滚动条 ************/
      &::-webkit-scrollbar {
        width: 10px; /*对垂直流动条有效*/
        height: 10px; /*对水平流动条有效*/
        background-color: rgba(255, 255, 255, 0.6); // 滚动条背景色
      }

      // ::-webkit-scrollbar-track —— 轨道的 颜色、内阴影、圆角
      &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background: #ededed;
      }

      // ::-webkit-scrollbar-thumb —— 滑块的 颜色、内阴影、圆角
      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #3fc8f8;
        background: rgb(23, 218, 255);
      }

      // ::-webkit-scrollbar-button —— 两端按钮样式，默认display: none;
      &::-webkit-scrollbar-button {
        background-color: #3fc8f8;
        background: rgb(23, 218, 255);
        height: 11px;
        width: 11px;
        cursor: pointer;
        // display: none;
      }

      // ::-webkit-scrollbar-corner —— 右下角汇合处样式，默认display: none;
      &::-webkit-scrollbar-corner {
        background: rgba(255, 255, 255, 0.6);
        // display: none;
      }
    }
  }
}
.custom-empty {
  text-align: center;
  padding: 20px;
}
.empty-img {
  width: 120px;
  height: auto;
  margin-bottom: 10px;
}
.empty-text {
  font-size: 20px;
  color: #fff;
}
</style>
<!-- 选择每页多少条的下拉框列表样式 必须得这么加 -->
<style lang="scss">
.select_bottom {
  .el-select-dropdown {
    background-color: rgba(91, 93, 179, 1); /* 设置下拉框背景颜色 */
    color: #fff; /* 设置列表项字体颜色 */
  }
  .el-select-dropdown__item {
    color: #fff; /* 设置列表项字体颜色 */
  }

  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: #169cdc;
    color: #fff;
  }
}
</style>
